<template>
    <div class="container">
        <button class="position" @click="fly"><img id="pic" src="/src/assets/image/定位 2.png"></button>
    </div>
    <div class="start">
        <button class="position" @click="change"><img id="pic" src="/src/assets/image/恢复.png"></button>
    </div>
</template>

<script setup>
import { inject, onMounted } from 'vue';
import { mapStore } from '@/stores/counter';
const store = mapStore()
let map
let scene
onMounted(() => {
    map = inject('$map')
    scene = inject('$scene')

    scene.on('loaded', () => {
        // 4. 鼠标位置
        const mouseLocation = new L7.MouseLocation({
            transform: (position) => {
                let newPosition = ['经度:' + position[0].toFixed(5), '纬度:' + position[1].toFixed(5)]
                return newPosition
            },
        })
        scene.addControl(mouseLocation)
        
        const mapTheme = new L7.MapTheme();
        scene.addControl(mapTheme);

    })
    map.on('style.load', () => {
        map.addLayer({
            id: 'china_content' + Date.now(),
            source: {
                type: 'geojson',
                data: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
            },
            type: 'fill',
            paint: {
                'fill-color': '#598496',
                'fill-opacity': 0.5
            }
        })

        map.addLayer({
            id: 'china_content' + Date.now(),
            source: {
                type: 'geojson',
                data: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json'
            },
            type: 'line',
            paint: {
                'line-color': '#fff',
                'line-width': 1
            }
        })
        /* 1. 全屏控件 */
        map.addControl(new mapboxgl.FullscreenControl())
        // 2.比例尺
        const scale = new mapboxgl.ScaleControl({
            unit: 'metric|imperial' // 默认为公里
        })
        map.addControl(scale)
        // 3.放大缩小
        const nav = new mapboxgl.NavigationControl(
            {
                // 是否显示指南针按钮, 默认为true
                "showCompass": true,
                // 是否显示缩放按钮, 默认为true
                "showZoom": true
            }
        )
        // 添加 
        map.addControl(nav, 'top-left')
    })
})

const fly = () => {
    map.flyTo({
        center: [102.70, 25.04],
        zoom: 12,
        speed: 0.8,
        pitch: 60,
    })
}

// 复位
const change = () => {
    store.isClick = false
    if (scene.getLayers().length != 0) {
        scene.removeAllLayer()
    }
    const layers = map.getStyle().layers
    const gdpLayers = layers.filter(item => item.id.startsWith('gdp_map'))
    const highLayers = layers.filter(item => item.id.startsWith('high-layer'))
    gdpLayers.forEach(item => {
        map.removeLayer(item.id)
    })
    highLayers.forEach(item => {
        map.removeLayer(item.id)
    })

    map.flyTo({
        center: [102.70, 25.04],
        zoom: 1,
        speed: 0.8,
        pitch: 0,
    })
}
</script>

<style lang="scss">
.mapboxgl-ctrl-scale {
    font-size: 20px;
}

.l7-control-container .l7-control {
    font-size: 12px;
}

.l7-control-mouse-location {
    position: fixed;
    right: 0%;
    bottom: 40px;
}

.container {
    position: fixed;
    top: 105px;
    left: 9px;
}

.start {
    position: fixed;
    top: 145px;
    left: 9px;
}

.l7-button-control {
    position: absolute;
    top: 37px;
    right: 2px;
    height: 28px;
    width: 30px;
    background-color: #fff;
    border-width: 0;
    border-radius: 2px;
    outline: 0;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 6px;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    line-height: 16px;
}

.position {
    // position: fixed;
    // top: 100px;
    // left: 100px;
    z-index: 1000;
    min-width: 28px;
    height: 28px;
    background-color: #fff;
    border-width: 0;
    border-radius: 5px;
    outline: 0;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0 6px;
    margin: 2px 2px 0 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    line-height: 16px;
}

#pic {
    width: 20px;
    height: 20px;
    margin-top: 2px;
}
</style>
